<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title th:text="${association.getName()}"></title>

    <script src="/ss/static/js/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/ss/static/layui/layui.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/index.js" type="text/javascript"></script>
    <script src="/ss/static/layui/lay/modules/layer.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/sliders.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/html5.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/freezeheader.js" type="text/javascript"></script>
    <script src="/ss/static/js/custom.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/ss/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/ss/static/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" href="/ss/static/css/global.css"/>
</head>
<body>
<div th:replace="template.html::header"></div>

<input type="number" id="master" th:value="${master.getUid()}">
<input type="number" id="association-money" th:value="${association.getMoney()}"/>
<div class="layui-container container" style=" padding-top:50px;">
    <div class="fly-home">
        <img th:src="${association.getFace()}">
        <h1 th:text="${association.getName()}">
            <!--<i class="iconfont icon-nan"></i>
            <i class="iconfont icon-nv"></i>
            <span style="color:#c00;">（超级码农）</span>
            <span style="color:#5FB878;">（活雷锋）</span>
            <span>（该号已被封）</span>-->
        </h1>
        <h2 class="fly-home-sign" style="color: darkorange; font-weight: bold"
            th:text="'社长: ' + ${master.getName()}"></h2>
        <h2 class="fly-home-sign" th:text="'创建时间: ' + ${#dates.format(association.getDate(), 'yyyy-MM-dd')}"></h2>
        <h2 th:if="${master.getUid() == user.getUid()}" class="fly-home-sign"
            th:text="'社团会费: ' + ${association.getMoney()}"></h2>
        <h2 th:if="${master.getUid() == user.getUid()}">
            编辑社团信息
            <svg th:onclick="'openPanel('+${association.getAid()}+', \'association\')'" style="cursor: pointer"
                 width="18" height="18"
                 viewBox="0 0 48 48" fill="none"
                 xmlns="http://www.w3.org/2000/svg">
                <path d="M7 42H43" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M11 26.7199V34H18.3172L39 13.3081L31.6951 6L11 26.7199Z" fill="none" stroke="#333"
                      stroke-width="4"
                      stroke-linejoin="round"/>
            </svg>
        </h2>
        <h2 th:if="${master.getUid() == user.getUid()}">
            解散社团
            <svg th:onclick="'deleteAssociation('+${association.getAid()}+')'" width="18"
                 height="18" viewBox="0 0 48 48" fill="none"
                 xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;cursor: pointer">
                <path d="M9 10V44H39V10H9Z" fill="none" stroke="#333" stroke-width="4"
                      stroke-linejoin="round" style=""></path>
                <path d="M20 20V33" stroke="#333" stroke-width="4" stroke-linecap="round"
                      stroke-linejoin="round"></path>
                <path d="M28 20V33" stroke="#333" stroke-width="4" stroke-linecap="round"
                      stroke-linejoin="round"></path>
                <path d="M4 10H44" stroke="#333"
                      stroke-width="4"
                      stroke-linecap="round"
                      stroke-linejoin="round"></path>
                <path d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#333"
                      stroke-width="4"
                      stroke-linejoin="round"></path>
            </svg>
        </h2>
    </div>

    <div class="main fly-home-main" style="border:0px; border-style:solid">
        <div class="layui-inline fly-home-jie">
            <div class="article-fenlei">
                <h3>社团荣誉
                    <button th:if="${user.getRole().equals('admin')}" class="layui-btn" lay-filter="*"
                            style="margin-left: 30px;background-color: black;border-radius: 30px;"
                            onclick="openHonorPanel('honor')">添加荣誉
                    </button>
                </h3>
                <button th:each="honor : ${honors}" th:text="${honor.getHonor()}" style="margin-top: 10px"
                        class="layui-btn layui-btn-warm">
                </button>
            </div>
            <div class="cloud">
                <h3>社团成员<a th:text="'(' + ${users.size()} + '人)'"></a>
                    <button th:if="${master.getUid() == user.getUid()}" class="layui-btn" lay-filter="*"
                            style="margin-left: 30px;background-color: black;border-radius: 30px;"
                            onclick="openMemberPanel('member')">删除
                    </button>
                </h3>
                <ul>
                    <li th:each="user: ${users}">
                        <a th:text="${user.getName()}"></a>
                    </li>
                </ul>
            </div>
            <div class="tuwen">
                <h3>社团活动
                    <button th:if="${master.getUid() == user.getUid()}" class="layui-btn" lay-filter="*"
                            style="margin-left: 30px;background-color: black;border-radius: 30px;"
                            onclick="openActivityPanel('activity')">申请活动
                    </button>
                </h3>
                <ul>
                    <li th:each="activity : ${activities}">
                        <a th:href="'activity?cid=' + ${activity.getCid()}">
                            <img th:src="${activity.getFace()}">
                            <b th:text="${activity.getName()}"></b>
                        </a>
                        <p>
                            <span class="tutime"
                                  th:text="${#dates.format(activity.getStart(), 'yyyy-MM-dd')} + ' 到 ' + ${#dates.format(activity.getEnd(), 'yyyy-MM-dd')}"></span>
                        </p>
                    </li>
                </ul>
            </div>
            <div th:if="${user.getRole().equals('admin')|| master.getUid() == user.getUid()}" class="tuwen">
                <h3 style="margin: 0;">
                    财务列表
                    <button th:if="${master.getUid() == user.getUid()}" class="layui-btn" lay-filter="*"
                            style="margin-left: 30px;background-color: black;border-radius: 30px;"
                            onclick="openFinancePanel('finance')">提交会费
                    </button>
                </h3>
                <div th:each="finance : ${finances}" class="article-list">
                    <p style="font-weight: bold;" th:text="'财务号: ' + ${finance.getFid()}"></p>
                    <p th:text="'使用描述: ' + ${finance.getUsage()}"></p>
                    <p class="autor">
                        <span>
                            <svg style="vertical-align: middle" width="15" height="15" viewBox="0 0 48 48" fill="none"
                                 xmlns="http://www.w3.org/2000/svg"><path
                                    d="M39 7H9C6.23858 7 4 9.23858 4 12V36C4 38.7614 6.23858 41 9 41H39C41.7614 41 44 38.7614 44 36V12C44 9.23858 41.7614 7 39 7Z"
                                    fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></path><path
                                    d="M18 15L24 21L30 15" stroke="#333" stroke-width="4" stroke-linecap="round"
                                    stroke-linejoin="round"></path><path d="M17 23H31" stroke="#333" stroke-width="4"
                                                                         stroke-linecap="round"
                                                                         stroke-linejoin="round"></path><path
                                    d="M17 29H31" stroke="#333" stroke-width="4" stroke-linecap="round"
                                    stroke-linejoin="round"></path><path d="M24 23V34" stroke="#333" stroke-width="4"
                                                                         stroke-linecap="round"
                                                                         stroke-linejoin="round"></path></svg>
                            <a th:text="${finance.getMoney()} + '元'"></a>
                        </span>
                        <span>
                            <svg style="vertical-align: middle" width="15" height="15" viewBox="0 0 48 48" fill="none"
                                 xmlns="http://www.w3.org/2000/svg"><rect x="4" y="4" width="40" height="40" rx="2"
                                                                          fill="none" stroke="#333" stroke-width="4"
                                                                          stroke-linecap="round"
                                                                          stroke-linejoin="round"></rect><path
                                    d="M4 14H44" stroke="#333" stroke-width="4" stroke-linecap="round"
                                    stroke-linejoin="round"></path><line x1="44" y1="11" x2="44" y2="23" stroke="#333"
                                                                         stroke-width="4" stroke-linecap="round"
                                                                         stroke-linejoin="round"></line><path
                                    d="M12 22H16" stroke="#333" stroke-width="4" stroke-linecap="round"
                                    stroke-linejoin="round"></path><path d="M22 22H26" stroke="#333" stroke-width="4"
                                                                         stroke-linecap="round"
                                                                         stroke-linejoin="round"></path><path
                                    d="M32 22H36" stroke="#333" stroke-width="4" stroke-linecap="round"
                                    stroke-linejoin="round"></path><path d="M12 29H16" stroke="#333" stroke-width="4"
                                                                         stroke-linecap="round"
                                                                         stroke-linejoin="round"></path><path
                                    d="M22 29H26" stroke="#333" stroke-width="4" stroke-linecap="round"
                                    stroke-linejoin="round"></path><path d="M32 29H36" stroke="#333" stroke-width="4"
                                                                         stroke-linecap="round"
                                                                         stroke-linejoin="round"></path><path
                                    d="M12 36H16" stroke="#333" stroke-width="4" stroke-linecap="round"
                                    stroke-linejoin="round"></path><path d="M22 36H26" stroke="#333" stroke-width="4"
                                                                         stroke-linecap="round"
                                                                         stroke-linejoin="round"></path><path
                                    d="M32 36H36" stroke="#333" stroke-width="4" stroke-linecap="round"
                                    stroke-linejoin="round"></path><line x1="4" y1="11" x2="4" y2="23" stroke="#333"
                                                                         stroke-width="4" stroke-linecap="round"
                                                                         stroke-linejoin="round"></line></svg>
                            <a th:text="${#dates.format(finance.getTime(), 'yyyy-MM-dd HH:mm:ss')}"></a>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div id='association-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">修改社团信息</h2>
            <input type="number" style="display: none" id="association-uid" th:value="${master.getUid()}">
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团名:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="association-name"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团标签:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="association-tag"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团描述:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="association-desc"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团logo图片网址:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="association-face"/>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px"
                    id="association-button">修改
            </button>
        </div>
    </div>

    <div id='honor-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">添加荣誉</h2>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">荣誉:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="honor-honor"/>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px" id="honor-button">
                添加荣誉
            </button>
        </div>
    </div>

    <div id='member-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">删除社团成员</h2>
            <div class="cloud" style="width: 400px;">
                <ul id="member-list">
                    <li th:each="user : ${users}" onclick="changeColor(this)">
                        <a th:text="${user.getAccount()} + '-' + ${user.getName()}"
                           th:id="'user' + ${user.getUid()}"></a>
                    </li>
                </ul>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px" id="member-button">
                确认删除
            </button>
        </div>
    </div>

    <div id='activity-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">申请活动</h2>
            <input type="number" style="display: none" id="activity-aid" th:value="${association.getAid()}">
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动名:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-name"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">内容:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-content"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">开始时间:&nbsp;</p>
                <input type="date" class="layui-input" style="align-self: center;width: 200px" id="activity-start"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">结束时间:&nbsp;</p>
                <input type="date" class="layui-input" style="align-self: center;width: 200px" id="activity-end"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动封面图片网址:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-face"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">预估人数:&nbsp;</p>
                <input type="number" class="layui-input" style="align-self: center;width: 200px" id="activity-people"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动地点:&nbsp;</p>
                <input type="text" class="layui-input" style="align-self: center;width: 200px" id="activity-location"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动经费:&nbsp;</p>
                <input type="number" class="layui-input" style="align-self: center;width: 200px" id="activity-money"/>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px" id="activity-button">
                申请
            </button>
        </div>
    </div>

    <div id='finance-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">提交会费</h2>
            <input type="number" style="display: none" id="finance-aid" th:value="${association.getAid()}">
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">金额:&nbsp;</p>
                <input type="number" min=1 class="layui-input" style="align-self: center;width: 200px"
                       id="finance-money">
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">描述:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="finance-usage"/>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px" id="finance-button">
                提交
            </button>
        </div>
    </div>
</div>

<div th:replace="template.html::footer"></div>
<script type="text/javascript">
    function deleteAssociation(aid) {
        var conf = confirm('确认解散');
        if (!conf) return
        $.ajax({
            url: 'api/association/' + aid,
            type: 'delete',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                if (result['success']) window.location = '/ss/index'
                else alert('解散社团失败')
            }
        })
    }

    function changeColor(target) {
        var background = target.style.background;
        if (background === 'black') target.style = ''
        else target.style.background = 'black'
    }

    function openHonorPanel(target) {
        document.getElementById(target + '-panel').style.display = 'flex'
        document.getElementById(target + '-button').onclick = () => {
            var honor = {}
            honor['aid'] = document.getElementById('activity-aid').value
            honor['honor'] = document.getElementById('honor-honor').value
            $.ajax({
                url: 'api/' + target,
                type: 'post',
                data: JSON.stringify(honor),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (result) {
                    if (result['success']) location.reload()
                }
            })
        }
        window.addEventListener('mousedown', (event) => {
            if (event.target.id === target + '-panel')
                event.target.style.display = 'none'
        })
    }

    function openMemberPanel(target) {
        document.getElementById(target + '-panel').style.display = 'flex'
        document.getElementById(target + '-button').onclick = () => {
            var list = document.getElementById('member-list').children
            var aid = document.getElementById('activity-aid').value
            for (var i = 0; i < list.length; ++i) {
                if (list[i].style.background !== 'black') continue
                var member = {}
                member['aid'] = aid
                member['uid'] = parseInt(list[i].children[0].id.toString().replace('user', ''))
                $.ajax({
                    url: 'api/' + target,
                    type: 'delete',
                    data: JSON.stringify(member),
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (result) {
                        if (result['success']) location.reload()
                    }
                })
            }
        }
        window.addEventListener('mousedown', (event) => {
            if (event.target.id === target + '-panel')
                event.target.style.display = 'none'
        })
    }

    function openActivityPanel(target) {
        document.getElementById(target + '-panel').style.display = 'flex'
        document.getElementById(target + '-button').onclick = () => {
            var activity = {
                'aid': '',
                'name': '',
                'content': '',
                'start': new Date(),
                'end': new Date(),
                'face': '',
                'people': 0,
                'location': '',
                'star': 0
            }
            for (var x in activity) {
                var element = document.getElementById(target + '-' + x.toString())
                if (element !== null) {
                    if (element.type === 'number') activity[x] = parseInt(element.value)
                    else activity[x] = element.value
                }
            }
            if (activity['start'] > activity['end']) {
                alert("开始时间不能晚于结束时间")
                return
            }
            var apply = {}
            apply['sender'] = parseInt(document.getElementById('master').value)
            apply['date'] = new Date()
            apply['state'] = 'pending'
            apply['type'] = 'activity'
            apply['content'] = JSON.stringify(activity)

            var finance = {}
            finance['aid'] = parseInt(document.getElementById('activity-aid').value)
            finance['time'] = new Date()
            finance['usage'] = '用于' + activity['name']
            finance['money'] = parseInt(document.getElementById('activity-money').value)

            if (finance['money'] > parseInt(document.getElementById('association-money').value)) {
                alert('社团剩余费用不足! 无法申请新的活动！')
                return
            }

            var apply2 = {}
            apply2['sender'] = apply['sender']
            apply2['date'] = apply['date']
            apply2['state'] = 'pending'
            apply2['type'] = 'finance'
            apply2['content'] = JSON.stringify(finance)

            $.ajax({
                url: '/ss/api/apply',
                type: 'post',
                data: JSON.stringify(apply2),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (result) {
                    if (result['success']) {
                        $.ajax({
                            url: '/ss/api/apply',
                            type: 'post',
                            data: JSON.stringify(apply),
                            dataType: "json",
                            contentType: "application/json;charset=utf-8"
                        })
                        location.reload()
                    } else alert('申请失败, 可能你已经申请了一次, 请进入个人信息查看申请的状态')
                }
            })
        }
        window.addEventListener('mousedown', (event) => {
            if (event.target.id === target + '-panel')
                event.target.style.display = 'none'
        })
    }

    function openFinancePanel(target) {
        document.getElementById(target + '-panel').style.display = 'flex'
        document.getElementById(target + '-button').onclick = () => {
            var finance = {
                'aid': '', 'money': 0, 'usage': '', 'time': new Date()
            }
            for (var x in finance) {
                var element = document.getElementById(target + '-' + x.toString())
                if (element !== null) {
                    if (element.type === 'number') finance[x] = parseInt(element.value)
                    else finance[x] = element.value
                }
            }
            var apply = {}
            apply['sender'] = parseInt(document.getElementById('master').value)
            apply['date'] = new Date()
            apply['state'] = 'pending'
            apply['type'] = 'association-money'
            apply['content'] = JSON.stringify(finance)
            $.ajax({
                url: 'api/apply',
                type: 'post',
                data: JSON.stringify(apply),
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                success: function (result) {
                    if (result['success']) {
                        alert('提交成功, 等待管理员审核, 可进入个人信息查看申请状态')
                        location.reload()
                    } else alert('申请失败, 可能你已经申请了一次, 请进入个人信息查看申请的状态')
                }
            })
        }
        window.addEventListener('mousedown', (event) => {
            if (event.target.id === target + '-panel')
                event.target.style.display = 'none'
        })
    }
</script>
</body>
</html>
